<template>
  <div><el-input placeholder="请输入学号" v-model="Name" id="text" ></el-input><el-button @click="search" :icon="Search">搜索</el-button></div>
  <div style="padding: 20px;">
    <el-table class="currentTable" :data="students"
              @selection-change=""
              :header-cell-style="{ background: '#f6f9fa'}">
      <!--el-table-column列-->
      <el-table-column prop="sno" label="学号"></el-table-column>
      <el-table-column prop="sname" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="birthday" label="生日">
        <template #default="scope">
          <span>{{ formatDate(scope.row.birthday) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="address" label="家庭住址"></el-table-column>
      <el-table-column prop="signature" label="个性签名"></el-table-column>

    </el-table>
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref,onMounted} from "vue";
import {useRoute} from "vue-router";
import axios from "axios";
import moment from 'moment';

const route=useRoute()
const id=route.query.id
let Name=ref('')
const students=ref([])
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)
onMounted(()=>{
  getData()
})
const formatDate = (dateString) => {
  return dateString ? moment(dateString).format('YYYY-MM-DD') : '';
};
const getData = () => {
  axios.get('http://localhost:8080/getStudentDataByClass', {
    params: {
      page: currentPage.value,
      size: pageSize.value,
      tno:id,
      name: Name.value
    }
  })
      .then(response => {
        students.value = response.data.records;
        total.value = response.data.total;
      })
      .catch(error => {
        window.alert('有问题');
      });
};

const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData()
};
//处理每页显示多少条事件
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize;
  getData()
}
const search=()=>{
  getData()
}
</script>